<template>
  <div class="worktime-form">
    <Card :bordered="false" dis-hover>
      <Form ref="worktimeForm" :model="formData" :rules="rules" :label-width="100">
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="所属部门" prop="department_id">
              <Select v-model="formData.department_id" placeholder="请选择部门">
                <Option v-for="dept in departments" :key="dept.id" :value="dept.id">
                  {{ dept.name }} (负责人: {{ dept.manager }})
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="填报周期" prop="week">
              <Select v-model="formData.week" placeholder="请选择周期">
                <Option value="2024年第1周">2024年第1周</Option>
                <Option value="2024年第2周">2024年第2周</Option>
                <Option value="2024年第3周">2024年第3周</Option>
                <Option value="2024年第4周">2024年第4周</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="24">
          <Col :span="12">
            <FormItem label="工时(小时)" prop="hours">
              <InputNumber 
                v-model="formData.hours" 
                :min="0" 
                :max="168" 
                :step="0.5"
                placeholder="请输入工时"
                style="width: 100%"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="工作内容" prop="content">
              <Input 
                v-model="formData.content" 
                type="textarea" 
                :rows="3"
                placeholder="请描述本周主要工作内容"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <FormItem>
              <Button type="primary" @click="submitForm" :loading="submitting">提交工时</Button>
              <Button @click="resetForm" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'WorktimeForm',
  props: {
    departments: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      submitting: false,
      formData: {
        department_id: null,
        week: '',
        hours: 0,
        content: ''
      },
      rules: {
        department_id: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        week: [
          { required: true, message: '请选择填报周期', trigger: 'change' }
        ],
        hours: [
          { required: true, message: '请输入工时', trigger: 'blur' },
          { type: 'number', min: 0, max: 168, message: '工时必须在0-168小时之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写工作内容', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.worktimeForm.validate((valid) => {
        if (valid) {
          this.submitting = true;
          // 模拟提交
          setTimeout(() => {
            this.$emit('submit', this.formData);
            this.submitting = false;
            this.resetForm();
          }, 1000);
        }
      });
    },
    resetForm() {
      this.$refs.worktimeForm.resetFields();
      this.formData = {
        department_id: null,
        week: '',
        hours: 0,
        content: ''
      };
    }
  }
};
</script>

<style scoped>
.worktime-form {
  margin-bottom: 24px;
}
</style> 